<template>
	<view>
		<view class="active">{{ Item }}</view>
	</view>
</template>

<script>
		import {
			dateTime
		} from '@/pages/time.js' //引入时间转换格式
		export default {
			data() {
				return {
					createTime: '', //时间
					stopTime: '', //失效时间
					Item: '',
					yue: 1673694460000, //实际创建的时间
				}
			},
			onLoad() { //	页面一加载 就执行		onLoad事件
				// getOrder 是请求接口	
				// getOrder().then(res=>{	//res是拿到的数据	赋值给 this.createTime
				// let data = res
				// console.log('123', this.yue )
				//订单创建时间时间戳转换	data.Time从后端拿到的数据是：1673666604000需要转成 2023 11:23:24这种格式	yyyy-MM-dd hh:mm:ss	是需要转换的格式
				this.createTime = dateTime(new Date(this.yue), 'yyyy-MM-dd hh:mm:ss')				
				//订失效时间（2个小时）这里是创建   “订单的时间”  加上两个小时之后的时间 如果 > 你现在的时间就是 （订单失效时间）
				this.stopTime = this.yue + (60 * 60 * 1000 * 1); //(60 * 60 * 1000 * 1)这里是时间戳来的 需要这么乘
				//设置订单倒计时
				// console.log('456', this.stopTime )
				this.interval();
				// })
			},
			methods: {
				//订单倒计时
				interval() {
					//修改this指向，避免闭包问题
					let that = this;
					//获取当前时间 例如 2023 11:23:24 自带这种格式不需要转换
					let startTime = new Date().getTime();
					//订单有效时间
					let endTime = new Date(this.stopTime).getTime(); //	从1673666604000需要转成 2023 11:23:24这种格式
					//开启定时器		倒计时
					let interval = setInterval(function() {
						let ts = endTime - startTime;
						if (ts > 1000) {
							let hh = Math.floor(ts / 1000 / 60 / 60 % 60);
							let mm = Math.floor(ts / 1000 / 60 % 60);
							let ss = Math.floor(ts / 1000 % 60);
							console.log('123', hh, mm, ss )
							// hh = hh.toString().padStart(2, '0');	 		//是否前面带	1小时前面带 0
							// mm = mm.toString().padStart(2, '0'); 		//是否前面带	分钟前面带 0
							// ss = ss.toString().padStart(2, '0'); 		//是否前面带	秒前面带 0
							that.Item = hh + '时' + mm + '分' + ss + '秒'; //这里是拼接的数据	需要渲染到页面上面
							startTime += 1000;
							// that.$forceUpdate(); //由于这是修改后端传过来的数据		层次太多	需要强制修改
						} else if (ts < 1000) {
							//倒计时失效以后	要做的操作		
							// that.$forceUpdate();
							clearInterval(interval);
						}
					}, 1000)
				}

			}
		}
</script>

<style>
	.active {
		color: red;
	}
</style>

